<script setup>
import { formatNumber } from '@/utils/index.js'

const props = defineProps({
  userId: {
    type: Number,
    required: true,
  },
})
console.log(props.userId, '获取动态信息')
const list = ref([
  {
    type: 'like', // 点赞
    from: {
      id: 1,
      nickName: '庄必凡',
      avatar:
        'https://p6-passport.byteacctimg.com/img/user-avatar/9cac5d4204be87b84d5c63f1d74e998c~50x50.awebp',
      job: 'cv攻城狮',
    },
    to: {
      user: {
        id: 2,
        nickName: '大脸怪',
        avatar:
          'https://p26-passport.byteacctimg.com/img/user-avatar/532a7f62611cb7c6e4f1feee180e6939~100x100.awebp',
        job: '全栈工程师',
      },
      article: {
        id: 1,
        title: `我的2024年终总结——不如摸鱼去`,
        summary: `这个名字来源于我非常喜欢的许嵩的专辑《不如吃茶去》。我希望自己能够偶尔脱离忙碌的生活，享受一些轻松的时光，不再日复一日地做马牛。同时，我也希望大家能够在自己的领域中，创造出属于自己的一片天地。`,
        cover: `https://img2.baidu.com/it/u=1115522663,3151405869&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800`,
        tags: [
          { id: 1, name: '前端' },
          { id: 2, name: '前端' },
        ],
        author: {
          id: 1,
          nickName: '不如摸鱼去',
          avatar:
            'https://img2.baidu.com/it/u=1115522663,3151405869&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800',
        },
        articleMetric: {
          viewCount: 103,
          collectCount: 2,
          likeCount: 1,
          commentCount: 121,
        },
        isLike: true,
        isCollect: false,
        releaseTime: '2024-12-24',
      },
    },
  },
  {
    type: 'attention', // 关注
    from: {
      id: 1,
      nickName: '庄必凡',
      avatar:
        'https://p6-passport.byteacctimg.com/img/user-avatar/9cac5d4204be87b84d5c63f1d74e998c~50x50.awebp',
      job: 'cv攻城狮',
    },
    to: {
      user: {
        id: 2,
        nickName: '大脸怪',
        avatar:
          'https://p26-passport.byteacctimg.com/img/user-avatar/532a7f62611cb7c6e4f1feee180e6939~100x100.awebp',
        job: '全栈工程师',
      },
    },
  },
])
</script>

<template>
  <div class="min-h-500">
    <template v-for="(item, index) in list" :key="index">
      <div v-if="item.type === 'like'" class="mb-20">
        <el-card
          header-class="custom-card-header"
          body-class="custom-card-body"
          footer-class="custom-card-footer"
        >
          <template #header>
            <div class="font-size-15">
              <UserPopover show-arrow :info="item.from" trigger="hover">
                <span class="cursor-pointer">{{ item.from.nickName }}</span>
              </UserPopover>
              <span class="op-text"> 赞了这篇文章</span>
            </div>
          </template>
          <div class="flex-col">
            <div class="flex items-center">
              <UserPopover
                show-arrow
                :info="item.to.user"
                trigger="hover"
                show-button
              >
                <el-avatar
                  :src="item.to.user.avatar"
                  alt="头像"
                  class="mr-10 cursor-pointer"
                />
              </UserPopover>
              <div>
                <UserPopover
                  show-arrow
                  :info="item.to.user"
                  trigger="hover"
                  show-button
                >
                  <span class="line-clamp-1 cursor-pointer fw-black">
                    {{ item.to.user.nickName }}
                  </span>
                </UserPopover>
                <span class="line-clamp-1 font-size-14 op-text">
                  <span> {{ item.to.user.job }} </span>
                  <span>&nbsp;·&nbsp;</span>
                  <span> {{ item.to.article.releaseTime }} </span>
                </span>
              </div>
            </div>
            <div class="pl-40 pr-10">
              <ArticleItem
                :item-info="item.to.article"
                :show-footer="false"
                :summary-line-num="2"
              />
            </div>
          </div>
          <template #footer>
            <div class="flex op-text us">
              <div class="f-c-c flex-1 border-r-1 cursor-pointer-bg-hover">
                <i v-if="!item.to.article.isLike" class="i-fe:thumbs-up mr-2" />
                <i v-else class="i-garden:thumbs-up-fill-12 mr-2 bg-primary" />
                <span>
                  {{ formatNumber(item.to.article.articleMetric.likeCount) }}
                </span>
              </div>
              <div class="f-c-c flex-1 border-r-1 cursor-pointer-bg-hover">
                <i class="i-fe:message-square mr-2" />
                <span>
                  {{ formatNumber(item.to.article.articleMetric.commentCount) }}
                </span>
              </div>
              <div class="f-c-c flex-1 cursor-pointer-bg-hover">
                <i class="i-fe:share mr-2" />
                <span>分享</span>
              </div>
            </div>
          </template>
        </el-card>
      </div>
      <div v-else-if="item.type === 'attention'" :key="index">
        <el-card body-class="collect_user-card-body">
          <div class="flex gap-10">
            <div>
              <UserPopover show-arrow :info="item.from" trigger="hover">
                <el-avatar
                  :size="50"
                  :src="item.from.avatar"
                  alt="头像"
                  class="cursor-pointer"
                />
              </UserPopover>
            </div>
            <div class="flex-col justify-around font-size-15">
              <div>
                <UserPopover show-arrow :info="item.from" trigger="hover">
                  <span class="cursor-pointer">{{ item.from.nickName }}</span>
                </UserPopover>
                <span class="font-size-14 op-text"> 关注了 </span>
                <UserPopover
                  show-arrow
                  :info="item.to.user"
                  show-button
                  trigger="hover"
                >
                  <span class="cursor-pointer">{{
                    item.to.user.nickName
                  }}</span>
                </UserPopover>
              </div>
              <div class="font-size-14 op-text">
                cv工程师
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </template>
    <el-empty
      v-if="list.length === 0"
      description="这里什么也没有"
      class="us"
    />
  </div>
</template>

<style scoped>
:deep(.el-card__header.custom-card-header) {
  padding: calc(var(--el-card-padding) - 10px) var(--el-card-padding);
}
:deep(.el-card__body.custom-card-body) {
  padding: calc(var(--el-card-padding) - 10px) var(--el-card-padding);
}
:deep(.el-card__body.collect_user-card-body) {
  padding: calc(var(--el-card-padding) - 10px) var(--el-card-padding);
}
:deep(.el-card__footer.custom-card-footer) {
  padding: calc(var(--el-card-padding) - 15px) var(--el-card-padding);
}
</style>
